<template>
	<div class="pg-page">
		<div class="header flex-between">
			<div class="title">{{ title }}</div>
			<div class="dtUpdate">{{ dtUpdate }}</div>
		</div>

		<div class="b-line-half"></div>
		
		<cube-textarea v-if="editEnable" class="content" v-model="content" :autoExpand="true" :maxlength="2000" ></cube-textarea>
		<div v-else class="content-read" >{{ content }}</div>
		
		<div class="ratingLabel ">
			教师评分：
		</div>

		<cube-checker class="teacherRating" v-model="teacherRating" :options="optionsTeacherRating" type="radio" />

		<div class="ratingLabel">教师评语：</div>
		<div class="teacherRemark">
		<cube-textarea v-model="teacherRemark" autoExpand :maxlength="500"></cube-textarea>
		</div>
		
		<div class="b-line-half mt20"></div>
		<div class="operator flex-between">
			<div class="" @click="onEdit()">
				<i class="iconfont icon-bianji"></i>编辑学生内容
			</div>
			<div class="" @click="onDelete()">
				<i class="iconfont icon-shanchu1"></i>删除该篇日记
			</div>
		</div>
		<div class="btn-confirm" @click="onSubmit()">保存</div>
	
		<!-- 弹窗 提交保存确认提示-->
<!-- 		<dialog-confirm 
			:visible="visiblePopup" 
			btnText="返回" 
			content="提交已更改" 
			:onConfirm="handleConfirm">
		</dialog-confirm>	 -->
		
		<!-- 弹窗 删除确认提示-->
		<dialog-confirm-cancel
			:visible="visiblePopup"
			:content="dialogContent"
			:btnConfirmText="btnConfirmText"
			:onConfirm="handleConfirm"
			:btnCancelText="btnCancelText"
			:onCancel="handleCancel"
		></dialog-confirm-cancel>
		
	</div>
</template>

<script>
// import DialogConfirm from '@/components/DialogConfirm.vue';
import DialogConfirmCancel from '@/components/DialogConfirmCancel.vue';

export default {
	name: 'DiaryStudentEdit',
	components: {
		// DialogConfirm,
		DialogConfirmCancel
	},
	data() {
		return {
			editEnable:false,
			visiblePopup: false, //提交确认弹窗显示
			dialogContent:"提交已更改",
			btnConfirmText:"返回",
			btnCancelText:"",
			
			title: '美好的一周',
			teacherName: '龚琼花',
			content:
				'第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作。刚走出学校，踏上了工作岗位，一切都是那么的新鲜，然而新鲜过后却感到十分困惑——公司里要用的东西学校里都没有学过。然而事实证明我多虑了，那里有和蔼的领导和友好的同事，他们给了我极大的帮忙和鼓励，使自我逐渐有了信心和勇气，能够勇敢的去应对任何挑战。相信自己，我能行的!',
			dtUpdate: '2020-07-02',
			teacherRating: 1,//'优秀'
			teacherRemark: '虽然你已经取得了可喜的成绩，可是，你还有很大的潜力。只要你继续发挥自身潜力，向着更高更强的目标奋斗，你就会拥有光辉灿烂的明天！ ',

			optionsTeacherRating: [
				{
					value: 1,
					text: '优秀'
				},
				{
					value: 2,
					text: '良好'
				},
				{
					value: 3,
					text: '中等'
				},
				{
					value: 4,
					text: '及格'
				},
				{
					value: 5,
					text: '不及格'
				}
			],
			
			
		};
	},

	methods: {
		onSubmit() {
			this.dialogContent="提交已更改"
			this.btnConfirmText="返回"
			this.btnCancelText=""
			this.visiblePopup = true			
		},
		//处理弹框确认按钮回调
		handleConfirm(){
			this.visiblePopup=false;
			this.$router.push({name:"diaryStudentList"})
		},
		//处理弹框确认按钮回调
		handleCancel(){
			this.visiblePopup=false;			
		},
		
		onDelete() {
			this.dialogContent="真的要删除吗"
			this.btnConfirmText="确认"
			this.btnCancelText="取消"
			this.visiblePopup = true
			
		},
		
		onEdit() {
			this.editEnable=true;	
		},
	},
	

};
</script>

<style lang="less" scoped>
.pg-page {
	margin: 24px;
	background-color: white;
	font-family: SourceHanSansCN;
	font-size: 12px;
	overflow: hidden;
	.header {
		margin-bottom: 10px;
		font-weight: 500;
		.title {
			color: #000000;
			font-size: 24px;
			line-height: 13px;
		}
		.dtUpdate {
			font-size: 12px;
			color: #3a3a3a;
			line-height: 36px;
			text-align: right;
		}
	}

	.content-read {
		margin-top: 20px;
		padding: 10px;
		// height:160px;
		border: 1px solid #ffb651;
		border-radius: 10px;
		font-size: 12px;
		font-weight: 400;
		color: #3a3a3a;
		line-height: 24px;
		text-indent: 24px;
	}
	.content{
		margin-top: 20px;
		height:160px;
		padding: 10px;
		font-size: 12px;
		font-weight: 400;
		color: #3a3a3a;
		line-height: 24px;
		// text-indent: 24px;
	}

	.ratingLabel {		
		font-size: 15px;
		font-weight: 400;
		color: #3a3a3a;
		line-height: 47px;
	}

	.teacherRemark {
		font-size: 12px;
		font-weight: 400;
		color: #3a3a3a;
		line-height: 24px;
		::after{
			border: none;
		}		
	}
	.operator {		
		font-size: 11px;		
		font-weight: 300;
		color: #626262;
		line-height: 47px;
		text-align: right;
		
	}
	.btn-confirm {
		margin: 20px auto 20px auto;
	}
}
.icon-bianji,.icon-shanchu1{
	color: #FE921E;
	padding: 0 5px;
	
}
.teacherRating{
	margin: 0 10px;	
	/deep/.cube-checker-item{	
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(248,173,92,0.64);
		border-radius: 5px;	
		
		font-size: 12px;	
		font-weight: 400;
		color: #FFB651;
		line-height: 12px;		
	}
	/deep/.cube-checker-item_active{		
		background: #FF7B0C;
		box-shadow: 0px 0px 4px 0px rgba(248,173,92,0.64);
		border-radius: 5px;		
		font-size: 12px;		
		font-weight: 400;
		color: #FFFFFF;
		line-height: 12px;
		
	}
}
</style>
